<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/jquery.validator.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">

		<link href="../plugin/userLib/css/user.css" rel="stylesheet">
		<link href="../plugin/userLib/css/userinfo.css" rel="stylesheet">
		<link href="../plugin/userLib/css/my_user.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<link href="../plugin/webuploader/webuploader.css" rel="stylesheet">
		<link href="../plugin/webuploader/batchupload.css" rel="stylesheet">
		<style>
			#tab {
				padding: 20px;
				overflow: hidden;
				background-color: #fff;
			}
			
			.ZZHT-tab-box {
				width: auto;
			}
			
			.ZZHT-batchupload .placeholder .webuploader-pick {
				background: #ed5d29;
				height: 35px;
				line-height: 35px;
				font-size: 16px;
				padding:0 15px;
			}
			
			.ZZHT-batchupload .statusBar .btns .uploadBtn {
				background: #ed5d29!important;
				height: 35px!important;
				color: #fff!important;
				line-height: 35px;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			
			.ZZHT-batchupload .statusBar .btns .webuploader-pick {
				height: 35px;
				line-height: 35px;
				width: 65px;
				color: #ed5d29!important;
			}
			
			.ZZHT-batchupload .statusBar .btns .uploadBtn:hover {
				background: #ed5d29;
			}
			
			.ZZHT-batchupload .statusBar .btns .webuploader-pick,
			.ZZHT-batchupload .statusBar .btns .uploadBtn,
			.ZZHT-batchupload .statusBar .btns .uploadBtn.state-uploading,
			.ZZHT-batchupload .statusBar .btns .uploadBtn.state-paused {
				background: #ffffff;
				border: 1px solid #ed5d29;
				color: #565656;
				display: inline-block;
				border-radius: 2px;
				margin-left: 10px;
				cursor: pointer;
				font-size: 14px;
				float: left;
			}
			
			.ZZHT-batchupload .statusBar {
				border-top: 1px solid #e6e6e6;
			}
			
			label {
				margin-right: 10px;
			}
			
			#specsAttrBox .webuploader-container {
				width: 100px;
				height: 30px;
				line-height: 30px;
				overflow: hidden;
				margin-right: 10px;
			}
			
			.webuploader-pick {
				background: #ed5d29;
				font-size: 14px;
			}
			.ZZHT-main{
				overflow: hidden;
			}
			.ZZHT-batchupload .placeholder{
				padding-top:0;
				min-height:50px;
				margin-top: 15px;
			}
			.ZZHT-batchupload .queueList.filled{
				padding:0;
			}

             /*星星评价*/
	        .comment {
	            font-size: 30px;
	            color: darksalmon;
	            display: inline-block;
	            vertical-align: middle;
	            margin-top:-5px;
	        }
	        .comment li {
	            float: left;
	            cursor: pointer;
	        }
	         /*星星评价end*/
	        
	        .ZZHT-tab-item{
	        	position: relative;padding:0px;
	        	margin-top: 25px;
			    border-top: 1px solid #eee;
			    padding-top: 10px;
	        }
	        
	        .ZZHT-batchupload .filelist li{
	        	width:128px;
	        	height:130px;
	        }
	    </style>
	</head>

	<body>
		<div id="header"></div>
		<div id="headerBox"></div>
		<!--<div id="nav_menu"></div>-->
		<div class="ZZHT-wrap">
			<div class="ZZHT-header" style="border-bottom: 1px solid #ffffff;">
				<div class="ZZHT-shop-nav">
					<div class="ZZHT-nav-box">
						<a href="#">
							<li class="liselect ZZHT-lfloat ZZHT-nav-boxa">用户中心</li>
						</a>
						<div class="ZZHT-clear"></div>
					</div>
				</div>
				<div class="ZZHT-clear"></div>
			</div>
			<div class="ZZHT-main">
				<div id="user_left"></div>
				<div class="ZZHT-content">

					<div class="ZZHT-user-head clearfix">
						<b>订单评价</b>
						<!-- <a href="http://test.izzht.cn/home/users/security.html">返回</a> -->
						<span class="user_bread fr">
	        				当前位置：<span>订单</span>--<span>订单评价</span>
						</span>
					</div>
					<div id="tab" class="ZZHT-tab-box">
						<div class="tab_fl" style="cursor: pointer;">
							<img src="" alt="" width="100%" />
							<p class="v-ellipsis">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</p>
						</div>
						<div class="tab_fr">
							<div class="eva_title">
								<b>订单评价</b>
							</div>
							<div class="eva_row">
								商品评分：
								<ul data-star="5" class="comment goodsScore">
								</ul>
							</div>
							<div class="eva_row">
								服务评分：
								<ul data-star="5" class="comment severScore">
								</ul>
							</div>
							<div class="eva_row">
								时效评分：
								<ul data-star="5" class="comment timeScore">
								</ul>
							</div>
							<div class="eva_row">
								<b>点评留言</b>
								<textarea name="" rows="" cols="" class="desc"></textarea>
							</div>
							<!--<div class="eva_gallery">
									<div class="gall_list">
										<ul>
											<li>
												<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg" alt="" />
												<b>x</b>
											</li>
											<li>
												<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg" alt="" />
												<b>x</b>
											</li>
											<li>
												<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg" alt="" />
												<b>x</b>
											</li>
											<li>
												<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg" alt="" />
												<b>x</b>
											</li>
										</ul>
									</div>
									<div class="upload_box">
										<div class="up_btn fl">上传图片</div>
										<div class="fl txtDesc">最多可以上传5张</div>
										<div class="up_btn eva_btn fr">评价</div>
									</div>-->
							<div class="ZZHT-tab-item">
								<div id="batchUpload" class="ZZHT-batchupload">
									<div>最多上传5张</div>
									<div class="queueList filled">
										<div id="dndArea" class="placeholder">
											<div id="filePicker" class="webuploader-container">
												<div class="webuploader-pick">上传图片</div>
												<div id="rt_rt_1cfcd1bk523om0c1vsj1jm075vc" style="position: absolute; top: 0px; left: 390px; width: 120px; height: 44px; overflow: hidden; bottom: auto; right: auto;"><input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label></div>
											</div>
										</div>
										<ul class="filelist"></ul>
									</div>
									<div class="statusBar" style="display: none;">
										<div class="progress" style="display: none;">
											<span class="text">0%</span>
											<span class="percentage" style="width: 0%;"></span>
										</div>
										<div class="info"></div>
										<div class="btns">
											<div id="filePicker2"></div>
											<div class="uploadBtn">开始上传</div>
										</div>
									</div>
								</div>
								<div style='margin:0px auto;text-align:center;border-top:1px solid #e6e6e6;'>
									<div class="footer_0" style="margin-top:15px;text-align: right;">
										<div class='fredBtn save_gallery' @click="eva_save()">评价</div>&nbsp;&nbsp;
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="clear:both;"></div>
		<br>
		</div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../plugin/layer/layui.js"></script>
		<script src="../plugin/layer/layer.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/common_view.js"></script>
		<script src="../plugin/webuploader/webuploader.js"></script>
		<script src="../plugin/webuploader/batchupload.js"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>

		<script type="text/javascript">
			var imgList = [];//用户上传的图片数组
			var vm = new Vue({
				el: '.ZZHT-wrap',
				data: {
					gallery: [],
				},
				methods:{
//					保存评价
					eva_save:function(){
						getImgList();
						
						if(!$('.desc').val()){
							layer.msg('请输入评价留言');
							return;
						}
						if(imgList.length>5){
							layer.msg('最多上传5张图片');
							return;
						}
						
						var data = {
							orderId : gup('orderId'),
							shopId : gup('shopId'),
							goodsId : gup('goodsId'),
							userId : localStorage.userId,
							goodsScore : $('.goodsScore').attr('data-star'),
							serviceScore : $('.severScore').attr('data-star'),
							timeScore : $('.timeScore').attr('data-star'),
							content:$('.desc').val(),
							images : imgList.join(','),
						};
						$.ajax({ 
							type: "get",
							url: SURLS + "goodsAppraises/add",
							data: data,
							async:false,
							success: function(data) {
								console.log(data);
								layer.msg(data.message);
							}
						});	
					}
				}
			});	
			
			var star = new starEvaluate();
			
			$(function() {
				//批量上传图片
				var uploader = batchUpload({
					uploadPicker: '#batchUpload',
					uploadServer: SURL + 'upload',
					formData: {
						dir: 'goods',
						isWatermark: 1,
						isThumb: 1
					},
					uploadSuccess: function(file, response) {
						var json = response;
						if(json.messageCode == 200) {
							$li = $('#' + file.id);
							$li.append('<input type="hidden" class="j-gallery-img" iv="' + json.entity + '" v="' + json.entity + '"/>');
							var delBtn = $('<span class="btn-del">删除</span>');
							$li.append(delBtn);
							delBtn.on('click', function() {
								delBatchUploadImg($(this), function() {
									uploader.removeFile(file);
									uploader.refresh();
								});
							});
							$('.filelist li').css('border', '1px solid rgb(59, 114, 165)');
						} else {
							ZZHT.msg(json.msg, {
								icon: 2
							});
						}
					}
				});
				
				star.init();
				
				//获取商品信息
				$.ajax({ //获取商品信息
					type: "get",
					url: SURLS + "sktShops/selectGoods",
					data: {
						goodsId: gup('goodsId'),
					},
					success: function(data) {
						var data = data.entity[0];
						var img = data.goodsImg;
						if(img.substr(0,4)!='http'){
							img = imgUrl + img;
						}
						$('.tab_fl>img').attr('src',img);
						$('.tab_fl>p').html(data.goodsName);
						
					}
				});	
						
			});
			
			//删除图片
			function delBatchUploadImg(obj) {
			    var c = ZZHT.confirm({
			        content: '您确定要删除商品图片吗?', yes: function () {
			            $(obj).parent().remove("li");
			            layer.close(c);
			        }
			    });
			}
			function getImgList(){
				imgList.splice(0,imgList.length);
				$.each($('.j-gallery-img'),function(i,v){
					imgList.push($(this).attr('iv'));
				})
			}
			
			$('.tab_fl').click(function(){
				location.href = "../view/detail.html?goodsId="+gup("goodsId");
			})
		</script>
	</body>

</html>